<template>
    <div class="container">
        <p class="title">城市排行 </p>
        <div class="charts" ref="charts"></div>
    </div>
</template>

<script setup lang="ts" name="RightTop">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const charts = ref()

onMounted(() => {
    const myCharts = echarts.init(charts.value)
    myCharts.setOption({
        xAxis: { data: ['北京', '上海', '山东', '四川', '内蒙古'] },
        yAxis: { name: '销售额' },
        series: {
            type: 'bar',
            data: [385550.32, 162220.85, 140000.66, 130000.31, 97000.00],
            labelLine: false,
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0, y: 0, x2: 1, y2: 1,
                    colorStops: [{ offset: 0, color: 'red' }, { offset: 0.5, color: '#D4237A' }, { offset: 1, color: 'orange' }]
                },
                borderRadius: [50, 50, 0, 0], opacity: 0.8
            },
            barWidth: 30
        },
        grid: { left: 55, right: 20, bottom: 20, top: 30 }
    })
})
</script>

<style scoped lang="scss">
.container {
    .title {
        font-size: 20px;
        margin-left: 20px;
    }

    .charts {
        margin-top: 20px;
        width: 100%;
        height: 250px;
    }
}
</style>